<template>
  <div class="current-root">
    <van-index-bar :sticky="false" :index-list="indexList">
      <van-index-anchor index="热门城市"/>
      <div class="hot-city">
        <template v-for="(item, index) in groupData?.hotCities" :key="index">
          <div class="hot-city-item" @click="cityClick(item)">{{item.cityName}}</div>
        </template>
      </div>

      <template v-for="(item, index) in groupData?.cities" :key="index">
        <van-index-anchor :index="item.group"/>
        <template v-for="(city, idx) in item.cities" :key="idx">
          <van-cell :title="city.cityName" @click="cityClick(city)"/>
        </template>
      </template>
    </van-index-bar>
  </div>

</template>

<script setup>
import {computed} from "vue";
import {useRouter} from "vue-router";
import {useCityStore} from "@/stores/modules/city";
const router = useRouter();
const cityStore = useCityStore();

const props = defineProps({
  groupData: {
    type: Object,
    default: () => ({})
  }
});

const indexList = computed(()=>{
  let list = []
  // 注意 props 没有传递过来的时候是 undefined 不能调用 map
  if (props.groupData.cities){
    list = props.groupData.cities?.map(item=> item.group);
    list.unshift('#')
  }
  return list
})


function cityClick(item) {
  console.log(item);
  cityStore.currentCity = item
  router.back()
}

</script>

<style lang="less" scoped>
// 当前组件根css类
.current-root {
  .hot-city {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px 25px 10px 10px;

    .hot-city-item {
      width: 70px;
      height: 28px;
      font-size: 12px;
      color: #000;
      border-radius: 14px;
      background-color: #fff4ec;
      text-align: center;
      line-height: 28px;
      margin: 5px 0;
    }
  }
}
</style>